<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" > 

<html>
<head>
<base href="<%=basePath%>">
<title>管理员列表</title>
<link rel="stylesheet" type="text/css" href="./js/bootstrap-3.3.5-dist/css/bootstrap.css" />
<link href="./js/metisMenu/metisMenu.min.css" rel="stylesheet">
<link href="./css/sb-admin/sb-admin-2.css" rel="stylesheet">
<link rel="stylesheet" href="./js/font-awesome/css/font-awesome.min.css">
<link href="./css/base.css" rel="stylesheet">
<link rel="stylesheet" href="./js/bootstrap-table/bootstrap-table.min.css">
<link rel="stylesheet" href="./js/bootstrap-multiselect/bootstrap-multiselect.css"/>
<link rel="stylesheet" href="./js/bootstrap-3.3.5-dist/css/bootstrap-datetimepicker.css">
<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./js/bootstrap-3.3.5-dist/js/bootstrap.js"></script>
<script src="./js/bootstrap-table/bootstrap-table-all.js"></script>
<script src="./js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="./js/metisMenu/metisMenu.js"></script>
<script src="./js/bootstrap-multiselect/bootstrap-multiselect.js"></script>
<script src="./js/bootstrap-3.3.5-dist/js/bootstrap-datetimepicker.js"></script>
<script src="./js/bootstrap-3.3.5-dist/js/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="./js/bootstrap-jquery-plugin/jquery.bootstrap.js"></script>
<script type="text/javascript" src="./js/common.js"></script>
<script type="text/javascript" src="./js/xss.js"></script>
</head>
<body>
<jsp:include page="../template/head.jsp" />
<jsp:include page="../template/leftnav.jsp" />
<div id="page-wrapper">
	<div>
		<h1>管理员列表</h1>
	</div>
	<div class="content">
		<form class="form-inline">
			<div class="form-group">
				<label for="adminName">管理员名称：</label>
				<input type="text" id="adminName" class="form-control" placeholder="请输入管理员名称" onkeyup="filters(this)" onchange="filters(this)">
			</div>
			<div class="form-group">
				<button class="btn  search-btn" id="search">搜索</button>
				<button id="create" class="btn">新增</button>
				<button id="reset" class="btn btn-default">重置</button>
			</div>
		</form>
		 <table id="table" data-toolbar="#toolbar" data-toggle="table" data-row-style="rowStyle" data-classes="table  table-no-bordered"
	           data-minimum-count-columns="2"  data-cache="false" data-pagination="true"  data-striped="data-striped"
	           data-page-list="[5, 10, 20, 50]"  data-query-params="tableQueryParams" style="word-break:break-all;"
	           data-side-pagination="server" data-page-size=10 >
	           <thead>
				<tr class="headTr">
					<th data-field="adminCode" data-width="30%" >管理员id</th>
					<th data-field="adminName" data-width="20%" >管理员名称</th>
					<th data-field="sex" data-width ="10%" data-formatter="sexFormatter">性别</th>
					<th data-field="occupation" data-width ="15%">职业</th>
					<th data-field="operation" data-width ="25%" data-formatter="operFormatter">操作</th>
				</tr>
			</thead>
	    </table>
	    <div id="adminperTemp" style="display:none">
			<ul class="list-inline">
				<li role="presentation"><a class="btn btn-primary">编辑</a></li>
				<li role="presentation"><a class="btn btn-danger">删除</a></li>
				<li role="presentation"><a class="btn detail—btn">权限</a></li>
			</ul>
		</div>
    </div>
</div>
<div id="createwrap" style="display:none">
  <form id="createform" role="form" class="form-horizontal">
    <div class="form-group">
    	<label for="adminName1" class="col-sm-3 control-label">名称:</label>
    	<div class="col-sm-8">
      		<input class="form-control" id="adminName1" placeholder="请输入管理员名称" onkeyup="filters(this)" onchange="filters(this)"/>
    	</div>
    	<br>
    	<br>
    	
    	<label for="occupation" class="col-sm-3 control-label">职业:</label>
    	<div class="col-sm-8">
      		<input class="form-control" id="occupation" placeholder="请输入职业" onkeyup="filters(this)" onchange="filters(this)"/>
    	</div>
    	<br>
        <br>
        <label for="sex" class="col-sm-3 control-label">性别:</label>
    	<div class="col-sm-8" style="margin-top:5px">
      		<label style="margin-right: 30px;">
	  			<input type="radio" name="inlineRadioOptions" id="yes" value="1" onkeyup="stripstript(this)"> 男
			</label>
			<label style="margin-right: 30px;">
		  		<input type="radio" name="inlineRadioOptions" id="no" value="0" onkeyup="stripstript(this)"> 女
			</label>
    	</div>
    </div>
  </form>
</div>

<div id="eidtwrap" style="display:none">
  <form id="editform" role="form" class="form-horizontal">
    <div class="form-group">
    	<label for="adminName2" class="col-sm-3 control-label" style="margin-top:5px">名称:</label>
    	<div class="col-sm-8">
      		<input class="form-control" id="adminName2" placeholder="请输入管理员名称" onkeyup="filters(this)" onchange="filters(this)"/>
    	</div>
    	<br>
    	<br>
    	
    	<label for="occupation2" class="col-sm-3 control-label" style="margin-top:5px">职业:</label>
    	<div class="col-sm-8">
      		<input class="form-control" id="occupation2" placeholder="请输入职业" onkeyup="filters(this)" onchange="filters(this)"/>
    	</div>
    	<br>
        <br>
        <label for="sex" class="col-sm-3 control-label" style="margin-top:5px">性别:</label>
    	<div class="col-sm-8">
      		<select id="sexSel">
			    <option value="1" selected>男</option>
			    <option value="0" selected>女</option>
			</select>
    	</div>
    	<br>
    </div>
  </form>
</div>

<script>

$(function () {
	
	"use strict";
	
	$('#table').bootstrapTable('refresh', {
		query : {
			offset: 0
		},
		url : "./sysAdimn/getAdminList",
		silent : true
	});

	$('#search').on('click', function (e) {
		e.preventDefault();
		searchOrder();
	});
	
	$('#create').on('click', function (e) {
		e.preventDefault();
		createAdmin();
	});
	
	 $('#sexSel').multiselect({
	 	includeSelectAllOption: true,
	 	buttonWidth: '150px'
	 });
	
});

function tableQueryParams(params) {
	var queryObj = getQueryObject();
	var newParams = $.extend(params,queryObj);
	return newParams;
}
	
function getQueryObject(){
	var queryObj;
	var adminName = $("#adminName").val();
	
	var queryObj = {
		adminName : adminName
	}
	
	if(adminName ==""){
		delete queryObj.adminName;
	}
	
	return queryObj;
}
	
function searchOrder(){
	var queryObj = getQueryObject();
	$('#table').bootstrapTable('refresh', {
		query : {
			offset: 0
		},
		url : "./sysAdimn/getAdminList",
		silent : true
	});
}

function operFormatter(value, row) {
	var operTemp = $("#adminperTemp").clone();
	var lis = operTemp.find("ul li");
	lis.eq(0).find("a").attr("onClick", "editAdmin(\""
		+row.adminCode+"\",\""
		+row.occupation+"\",\""
		+row.sex+"\",\""
		+row.adminName+"\")");
	lis.eq(1).find("a").attr("onClick", "deleteAdmin(\""+row.adminCode+"\")");
	lis.eq(2).find("a").attr("href", "./jsp/permission/adminpermission.jsp?adminCode="+row.adminCode);
	return operTemp.html();
}

function sexFormatter(value, row){
	if(value==null){
		return "-";
	}else if(value==1){
		return "男";
	}else if(value==0){
		return "女";
	}
}

function deleteAdmin(adminCode){
	$.messager.model = { 
		//定义消息提示框
	   	ok:{ text: "确定", classed: 'btn btn-success' },
	    cancel:{text:"取消",classed: 'btn btn-error' }
	};
	$.messager.confirm("温馨提示", "确定删除?", function(){
		$.ajax({
			url: "./sysAdimn/deleteAdmin",
			data:{
				adminCode: adminCode
			},
			type: "GET",
			dataType: 'json',
			cache: false,
			success: function(ret) {
				$.messager.popup(ret.msg);
				if(ret.resultCode==0){
					$('#table').bootstrapTable('refresh', {
						query : {
							offset: 0
						},
						silent : true
					});
				}
			}
		});
	});
}

function editAdmin(adminCode,occupation,sex,adminName){
   	$("#eidtwrap").show();
   	$("#adminName2").val(adminName);
   	$("#occupation2").val(occupation);
	$("#eidtwrap").dialog({
         	title   : "编辑管理员",
        	'class' :  "mydialog",
        	onClose : function() { 
         		 $(this).dialog("close");
         		 $("#adminName2").val('');
             	 $("#occupation2").val('');
          	}, 
          	buttons : [{
          		text : "提交",
          		'class' : "btn btn-primary",
             	click : function() {
             		var adminName = $("#adminName2").val();
             		var sex = $("#sexSel").val(); 
             		var occupation = $("#occupation2").val();
             		
                    $.ajax({
                     url: "./sysAdimn/editAdmin",
                     data: {
                     	adminCode :adminCode,
						adminName : adminName,
						sex : sex,
						occupation :occupation
                     },
                     type: "POST",
                     dataType: 'json',
                     cache: false,
                     success: function (ret) {
                         if (ret.resultCode == 0) {
                             $.messager.popup(ret.msg);
                             $('#table').bootstrapTable('refresh', {
								query : {
									offset: 0
								},
								silent : true
							});
                            
                         }else{
                         	$.messager.popup(ret.msg);
                         }
                         $(this).dialog("close");
                     }
                 });
                 $(this).dialog("close");
                 $("#adminName2").val('');
             	 $("#occupation2").val('');
             	}
             },{
             text : "关闭",
             'class' : "btn btn-default",
             click : function() {
                	 $(this).dialog("close");
                	 $("#adminName2").val('');
	             	 $("#occupation2").val('');
             	}
         }]
     });
}

function createAdmin(){
	$("#createwrap").show();
	$("#createwrap").dialog({
         	title   : "新增管理员",
        	'class' :  "mydialog",
        	onClose : function() { 
         		 $(this).dialog("close");
         		 $("#adminName1").val('');
             	 $("#sex").val('');
             	 $("#occupation").val('');
          	}, 
          	buttons : [{
          		text : "提交",
          		'class' : "btn btn-primary",
             	click : function() {
             		var adminName = $("#adminName1").val();
             		var sex = $('input[name="inlineRadioOptions"]:checked').val()?$('input[name="inlineRadioOptions"]:checked').val():1; 
             		var occupation = $("#occupation").val();
             		
                    $.ajax({
                     url: "./sysAdimn/adminRegister",
                     data: {
						adminName : adminName,
						sex : sex,
						occupation :occupation
                     },
                     type: "POST",
                     dataType: 'json',
                     cache: false,
                     success: function (ret) {
                         if (ret.resultCode == 0) {
                             $.messager.popup("温馨提示:新增管理员成功!");
                             $('#table').bootstrapTable('refresh', {
								query : {
									offset: 0
								},
								silent : true
							});
                            
                         }else{
                         	$.messager.popup("温馨提示:新增管理员失败!");
                         }
                         $(this).dialog("close");
                     }
                 });
                 $(this).dialog("close");
                 $("#adminName1").val('');
             	 $("#sex").val('');
             	 $("#occupation").val('');
             	}
             },{
             text : "关闭",
             'class' : "btn btn-default",
             click : function() {
                	 $(this).dialog("close");
                	 $("#adminName1").val('');
	             	 $("#sex").val('');
	             	 $("#occupation").val('');
             	}
         }]
     });
}

</script>
</body>
</html>